<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>富豪榜</title>
  <link rel="stylesheet" href="index.css">
  <script src="./index.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li>主页</li>
      <li>排行榜</li>
      <li>联系方式</li>
    </ul>
  </nav>
  <!-- 头部内容 -->
      <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
      </header>
      <!-- 主题内容 -->
      <div class="container">
        <!-- 左盒子 -->
        <aside>
          <!-- 五个按钮 -->
          <button id="add-user">添加账户</button>
          <button id="double">资金翻倍</button>
          <button id="show-millionaire">查询百万富翁</button>
          <button id="sort">财富榜</button>
          <button id="calculate">计算总额</button>
        </aside>
        <!-- 右盒子 -->
        <main id="main">
          <h2>
            <strong>Person</strong>
            <span>Wealth</span>
          </h2>
          <div class="mainBox">
            <div class="mainLine">
              <div class="left">小勇</div>
              <div class="right">
                <span>$</span>
                <span>123</span>
              </div>
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;font-size: 24px;color:coral;">总额:<span class="sum"></span></div>
        </main>
      </div>
</body>

</html>